<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav .nav-content {
            width: 750px;
            margin: 0 auto;
        }
        .nav .nav-content .nav-item .logo-content img{
            width: 222px;
            height: 114px;
            position: absolute;
            left: -106px;
            top: -12px;
        }
        .nav .nav-content .nav-item .logo-content{
            width: 100px;
            height: 85px;
            overflow: hidden;
            position: relative;
        }
        @font-face{
            font-family: QS-R;
            src:url(./font/Quicksand-Regular.ttf);
        }
   
        @font-face{
            font-family: QS-M;
            src:url(./font/Quicksand-Medium.ttf);
        }

        .nav .nav-content .nav-list {
            width: 750px;
            height: 85px;
            display: flex;
            align-items:center;
            justify-content :space-between;
            /* background-color: #F5F5F5; */
            
        }

        .nav .nav-content .nav-item {
            font-family: QS-M;
            font-size: 24px;
            /* float: left; */
            
        }
        
        .nav .nav-content .nav-item:hover {
            cursor: pointer;
            color: blue;
        }

        .choseed-btn {
            color: blue;
        }
        
    </style>
    <style>
        .course-bord-content {
            width: 750px;
            display: flex;
            flex-wrap:wrap;
            margin: 0 auto;
            justify-content: space-around;
            
        }
        .course-bord-content .course-item {
            width: 365px;
            height: 200px;
            /* background-color: #4472C4; */
            margin: 10px 0;
            border-radius: 10px;
        }

        .course-bord-content .course-item:hover {
            cursor: pointer;
            box-shadow: 0 1px 3px rgb(0 0 0 / 2%), 0 16px 32px -4px rgb(0 0 0 / 17%);
            transform: translateY(-1px);

        }

        .course-bord-content .course-item .split-line{
           
            height: 130px;
            position: relative;
        }
        .course-bord-content .course-item .split-line .split-line-black {
            position: absolute;
            top: 130px;
        }
        .course-bord-content .course-item .course-name{
            font-family: QS-M;
            text-align: center;
            line-height: 64px;
            font-size: 24px;
        }
    </style>
    <style>
        .nav-item a{
            text-decoration: none;
            color: black;
        }
        .nav-item a:hover{
            color: #004aad;
            text-decoration: underline;
        }
        .course-name h3>a{
            color: black;
            text-decoration: none;
        }
        .course-name h3>a:hover{
            color: #004aad;
            text-decoration: underline;
        }

    </style>
</head>
<body th:object="${session.currentLoginUser}">
    <div class="nav">
        <div class="nav-content">
            <ul class="nav-list">
                <li class="nav-item">
                    <div class="logo-content">
                        <img src="/image/LOGO.png" alt="">
                    </div>
                </li>
                <li class="nav-item">
                    <a style="color: #004add" href="/courseBordTeacher">Course board</a>
                </li>
                <li class="nav-item" th:if="*{role}=='learner'">
                    <a href="/timetable">Timetable</a>
                </li>
                <li class="nav-item" th:switch="*{role}">
                    <a th:case="'eductor'" href="/courseBordTeacher/crades">GradesMarking</a>
                    <a th:case="'learner'" href="/grade">Grades</a>

                </li>
                <li class="nav-item">
                    <a href="/drive">Drive</a>

                </li>
                <li class="nav-item">
                    <a href="/accountInfo">
                    <svg  t="1639982246046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8917" width="48" height="48"><path style="fill: #004aad" d="M619.064182 504.57971c91.163561-42.401656 154.766046-133.565217 154.766046-239.569358C773.830228 118.724638 655.10559 0 508.819876 0S243.809524 118.724638 243.809524 265.010352c0 106.004141 63.602484 197.167702 154.766045 239.569358C169.606625 555.461698 0 758.989648 0 1002.799172v21.200828h1017.639752v-21.200828c0-243.809524-169.606625-447.337474-398.57557-498.219462z" p-id="8918" fill="#1296db"></path></svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="course-bord-content" >

        <div th:each="course:*{courses}" class="course-item" style="background-color: #4472C4;">
            <div class="split-line">
                <div class="split-line-black" style="width: 365px;height: 5px;background-color: black;"></div>
            </div>
            <div class="course-name">
                <h3><a th:href="@{courseInfo/{uniId}/{courseId}(uniId=${course.uniId},courseId=${course.courseId})}" th:text="${course.courseId}">SSK3408</a></h3>
            </div>  
        </div>

<!--        <div class="course-item" style="background-color: #4472C4;">-->
<!--            <div class="split-line">-->
<!--                <div class="split-line-black" style="width: 365px;height: 5px;background-color: black;"></div>-->
<!--            </div>-->
<!--            <div class="course-name">-->
<!--                <h3>SSK3313</h3>-->
<!--            </div> -->
<!--        </div>-->
<!--        <div class="course-item" style="background-color: #3ACECE;">-->
<!--            <div class="split-line">-->
<!--                <div class="split-line-black" style="width: 365px;height: 5px;background-color: black;"></div>-->
<!--            </div>-->
<!--            <div class="course-name">-->
<!--                <h3>SKM3300</h3>-->
<!--            </div> -->
<!--        </div>-->
<!--        <div class="course-item" style="background-color: #3ACECE;"> -->
<!--            <div class="split-line">-->
<!--                <div class="split-line-black" style="width: 365px;height: 5px;background-color: black;"></div>-->
<!--            </div>-->
<!--            <div class="course-name">-->
<!--                <h3>SKM4214</h3>-->
<!--            </div> -->
<!--        </div>-->
    </div>
</body>
</html>